<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* .box1 {
        width: 200px;
        height: 200px;
        background-color: palegreen; */
      /* float: left; */
      /* margin-right: -100px; */
      /* margin-bottom: 100px; */
      /* margin-bottom: 100px; */
      /* margin-right: 50px; */

      /* margin: 50px 100px 150px 200px; */
      /* } */
      /* .box2 {
        width: 300px;
        height: 300px;
        background-color: lightcoral; */
      /* float: left; */
      /* margin-top: 100px; */
      /* margin-top: -50px; */
      /* margin-left: 50px; */
      /* } */

      /* .wrap {
        width: 500px;
        height: 400px;
        background-color: aquamarine;
        overflow: hidden;
      }
      .son1 {
        width: 400px;
        height: 100px;
        background-color: blueviolet;
        margin-top: 50px;
      }
      .son2 {
        width: 400px;
        height: 100px;
        background-color: lightcoral;
        margin-bottom: 50px;
      } */

      /* span {
        background-color: blueviolet;
        margin-left: 50px;
        width: 500px;
      } */

      div {
        width: 400px;
        height: 300px;
        background-color: aquamarine;
        margin: 0px auto;
      }
    </style>
  </head>
  <body>
    <!-- <div class="box1"></div>
    <div class="box2"></div> -->

    <!-- <p>就是元素外面的空白区域,被称为边距</p>
    <p>就是元素外面的空白区域,被称为边距</p>
    <p>就是元素外面的空白区域,被称为边距</p>
    <p>就是元素外面的空白区域,被称为边距</p>
    <p>就是元素外面的空白区域,被称为边距</p> -->

    <!-- <div class="wrap">
      <div class="son1"></div>
      <div class="son2"></div>
    </div> -->

    <!-- <span>这是一个span元素</span> -->

    <div></div>
  </body>
</html>

<!-- 
  margin外间距
   
    就是元素外面的空白区域,被称为边距

    margin主要是用来改变元素和元素之间的位置关系的
    margin不会改变元素的大小
    margin是没有背景颜色的

    单一方向加外间距
      margin-top
      margin-bottom
      margin-left
      margin-right

    margin是允许添加负数的

    margin又允许写多个参数
      一个参数： 上下左右
      二个参数： 上下  左右
      三个参数： 上  左右  下
      四个参数： 上  右  下  左

    
    问题一：
    如果两个元素是横着排的，那么左右的外间距会相加
    如果两个元素是竖着排的，那么上下的外间距会叠加
      如果叠加是同号的，取绝对值大的那个值
      如果是异号，是取相加的值

    问题二：
    当父元素里面的第一个子元素(没有添加浮动或者定位)，添加了margin-top属性，那么就会把父元素一起带下来
    最后一个子元素，添加了margin-bottom属性，那么不会撑开父元素
    解决方案：直接给父元素添加overflow: hidden;
    BFC块状格式化上下文

    问题三：
    那些不会独占一行的元素(行内元素),是不能添加margin-top/margin-bottom
    连宽高都不能添加
    改变了元素类型/添加了浮动/添加了定位/给它的父元素添加了弹性盒,这些情况下右可以添加了



    水平居中
    margin: 0 auto;
      auto表示占据剩余的空间
      上下的auto是没有用的,只适用于左右

 -->
